<template>
    <div class="Avie_normal_sample home">
        <Formbox ref="SearchBox" v-if="searchList.length > 0" :formData.sync="searchData" :ItemList='searchList'
            @InquireInfo='InquireInfo' @ClearInfo='ClearInfo' type-class="searchbox" />
        <div class="Avie_btn_grounp">
            <div style="flex:1" v-if="options.length">
                <button :class="(index == 0 ? 'Avie_btn_confirm' : 'Avie_btn_cancel') + ' option-btn'" v-show="item.showCondition != undefined ? item.showCondition : true" v-for="(item, index) in options" :key="index"
                @click="item.method({selection, searchData})"><i :class="`iconfont ${icons[item.type]? icons[item.type] : item.icon}`"></i>{{item.name}}</button>
            </div>
            <div>
                <slot name="header" v-bind:data="{tableData,total}"></slot>
            </div>
        </div>
        <div class="Avie_table_box">
            <BaseTable ref="Table"
                :IndexSwitch='IndexSwitch' @SelectChange="hanldeSelection" :SelectionSwitch='SelectionSwitch' :tableData='tableData' :tableHead='tableHead' @ControlHandler='ControlHandler'>
                <el-table-column
                    v-if="tableMethed.length > 0"
                    label='操作'
                    :align="'left'"
                    :width="tableMethed.length * 60"
                    show-overflow-tooltip
                    fixed="right"
                >
                <template slot-scope="scope">
                    <div class="Avie_table_control Avie_table_control_one">
                        <span v-for="(item, index) in tableMethed" :key="index"
                        v-show="item.showCondition ? item.showCondition(scope.row): true"
                        @click="item.method(scope.row)" >{{typeof(item.name) == 'string' ? item.name: item.name(scope.row)}}</span>
                    </div>
                </template>
                </el-table-column>
                <div :key="_index" :slot="head.slotName" slot-scope="scope" v-for="(head, _index) in slotTableHead">
                    <slot :name="head.slotName" v-bind="scope"></slot>
                </div>
            </BaseTable>
        </div>
        
        <div class="Avie_sample_footer">
            <pagination ref="pagination" :loadDataMethod="GetInfo" />
        </div>

    </div>
</template>

<script>
import pagination from './pagination'
import Formbox from '@/components/Formbox'
import BaseTable from './TableComponents/normal'
export default {
    components: {pagination,Formbox,BaseTable},
    name: 'UserManage',
    props: {
        searchList: {
            type: Array,
            default: () => []
        },
        options: {
            type: Array,
            default: () => []
        },
        tableMethed: {
            type: Array,
            default: () => []
        },
        loadDataUrl: {
            type: Object,
            default: () => {}
        },
        tableHeadName: {
            type: String,
            default: ''
        },
        tableHeads: {
            type: Array,
            default: () => []
        },
        defaultSearchForm: {
            type: Object,
            default: () => {}
        },
        IndexSwitch: {
            type: Boolean,
            default: true
        },
        SelectionSwitch: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            Parameter:{ // 参数 对照查看 readme.md

            },
            icons: {
                add: 'icontianjia',
                delete: 'iconshanchu',
                submit: 'icontijiao',
                publish: 'iconwenjuantiaocha',
                download: 'icondaochu',
            },
            tableData:[],
            targetData:{},
            oneShow:false,
            batchType:'',
            selection:[],
            twoShow:false,

            threeShow:false,
            total: 0,
            searchData: {}
        }
    },
    mounted() {
        this.GetCanshu();
    },
    computed: {
        tableHead:function(){
            if (this.tableHeads && this.tableHeads.length>0) {
                return this.tableHeads
            } else {
                return this.$store.state.main.TableHeadData[this.tableHeadName];
            }
        },
        slotTableHead () {
            return this.tableHeads.filter(item => item.slotName)
        }
    },
    methods: {
        hanldeSelection(selection) {
            this.selection = selection
        },
        exportFile() {
            let info = this.$refs.SearchBox.GetSearchData();
            let exoprt = this.TbCoursewareApi.tbCourseManagementExport(info);
            window.Download(exoprt);
        },
        async changeStatus(data) {
            let confirm = await this.Popups('提示', `是否确定${data.isStatus == 0 ? '停止' : '启用'}`)
            if (confirm == 'confirm') {
                const params = {
                    id: data.id,
                    isStatus: +!data.isStatus
                }
                let info = await this[this.loadDataUrl.api].isStatus(params)
                if (info.code == 200) {
                    this.$message.warning('操作成功')
                    this.InquireInfo()
                } else {
                    this.$message.warning('操作失败')
                }
            }
        },
        ControlHandler(type,data) {
            this.$emit(type,data)
            switch (type) {
            case 'changeStatus': 
                this.changeStatus(data.data)
                break;
            }
        },
        async GetCanshu(){
            let key = []
            this.searchList.forEach(item => {
                if (item.props && item.optionsKey) {
                    key.push(item.optionsKey)
                } 
            })
            console.log(key)
            this.Parameter = await this.ParameterInfo(key);
            // let organizationList = await this.SysEnterpriceApi.getEnterprice({});
            // this.Parameter['organizationList'] = organizationList.data;

            let newItem = this.searchList.map(el=>{
                if(el.optionsKey){
                    el.options = el.options.concat(this.Parameter[el.optionsKey]);
                }
                return el;
            })
            this.$emit('update:searchList',newItem)
        },
        async GetInfo(pageNumber=1, pageSize=20, defaultParams={}){ // 获取 数据
            const params = {
                ...this.searchData,
                current: pageNumber,
                size: pageSize,
                ...this.defaultSearchForm,
                ...defaultParams
            }
            console.log(this.loadDataUrl.api,this.loadDataUrl.url)
            let info = await this[this.loadDataUrl.api][this.loadDataUrl.url](params)
            console.log(info)
            this.tableData = info.records;
            this.total = info.totalCount
            return info
        },
        InquireInfo(info){
            this.searchData = {...info,...this.defaultSearchForm}
            this.$refs.pagination.SizeChange(20);
            this.$emit('inquireInfo', this.searchData)
        },
        ClearInfo(obj){
            this.searchData = {...obj,...this.defaultSearchForm}
            this.$refs.pagination.SizeChange(20);
        },
         async ParameterInfo(list){ // 数据字典查询
            let api = list.map(key=> this.Lushu[key]);
            let info = await Promise.all(api);
            let data_ = {};
            info.forEach((el,index)=>{
                data_[list[index]] = el;
            })
            return data_;
        },
    },
}
</script>

<style lang="scss" scoped>
.option-btn+.option-btn{
    margin-left: 15px;
}
</style>
